<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/alert.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <title>客户管理</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        .main{
            width: 100%;
        }
        .search-data{
            width: 100%;
            margin-top: 10px;
            background-color: #fff;
            padding-bottom: 10px;
        }
        .search-data .search-div{
            margin: 10px 15px;
            display: inline-block;
            width: 365px;
            height: 40px;
        }
        .search-data .search-div label{
            display: inline-block;
            width: 100px;
            height: 35px;
            line-height: 35px;
            text-align: right;
            margin-right: 5px;
            font-size: 18px;
            font-weight: bold;
        }
        .search-data .search-div input{
            display: inline-block;
            width: 245px;
            height: 35px;
            line-height: 35px;
            background-color: rgba(245, 245, 245, 1);
            border: 1px solid rgba(77, 77, 77, 1);
            border-radius: 3px;
            color: #666;
            text-indent: 1.5em;
        }
        .search-data .search-div:nth-last-child(1){
            display: block;
        }
        .search-data .search-div a{
            display: inline-block;
            color: #fff;
            background-color: rgba(42, 130, 228, 1);
            padding:5px;
            width: 50px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            text-decoration: none;
            margin: 0px 5px;
        }
        .search-data .search-div a:nth-child(2){
            color: #000;
            background-color: rgba(128, 128, 128, 1);
        }
        .order-page{
            margin-top: 10px;
            width: 100%;
            min-height: 200px;
            background-color: #fff;
        }
        tfoot div{}
        .table-check{

        }
        .order-page-table{
            width: 100%;
            border-collapse: collapse;
        }
        .order-page-table thead tr th{
            background-color: rgba(119, 171, 230, 1);
            color: #fff;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
        }

        .order-page-table tbody tr td{
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #999;
            border-bottom: 1px solid rgba(128, 128, 128, 1);
            height: 45px;
            line-height: 45px;
            min-width: 140px;
        }

        .order-page-table tbody tr td a{
            /* color: #666; */
            display: inline-block;
            width: 80px;
            background-color: rgb(32, 44, 58);
            color: #fff;
            height:30px;
            line-height: 30px;
        }

        .order-page-table tfoot tr td{
            height: 45px;
            line-height: 45px;
            border-bottom: 1px solid #666;
        }

        .order-page-table tfoot tr td div{
            display: inline;
            height: 45px;
            line-height: 45px;
        }

        .order-page-table tfoot tr td div:nth-child(3){
            float: right;
        }

        .order-page-table tfoot tr td label{
            font-size: 18px;
            height: 45px;
            line-height: 45px;
        }

        .order-page-table tfoot tr td label input[type="checkbox"]{
            width: 17px;
            height: 17px;
            margin-left: 10px;
        }

        .order-page-table tfoot tr td .table-button a{
            display: inline-block;
            text-align: center;
            height: 35px;
            line-height: 35px;
            text-decoration: none;
            margin: 0px 10px;
            width: 100px;
            background-color: rgba(119, 171, 230, 1);
            color: white;
            border: 1px solid rgb(131, 178, 231);
        }

        .order-page-table tfoot tr td .table-button a:nth-child(2){
            background-color: #fff;
            color: #666;
            border: 1px solid #999;
        }
        .order-page-table tfoot tr td div .pagination{
            display: inline-block;
            list-style: none;
            margin: 0px;
            padding:0px;
        } 
        .order-page-table tfoot tr td div .pagination li{
            display: inline-block;
            list-style: none;
            border: 1px solid #777;
            height: 25px;
            line-height: 25px;
            width: 40px;
            margin: 0px 2.5px;
            text-align: center;
            background-color: #eee;
        }
        .order-page-table tfoot tr td div .pagination li[class="active"]{
            background-color: #aaa;
        }
        .order-page-table tfoot tr td div .pagination li a{
            display: block;
            text-align: center;
            color: #1f1f11;
            text-decoration: none;
            width: 100%;
            height: 100%;
        }
        .order-page-table tfoot tr td div .pagination li[class="active"] span{
            color: #fff;
        }
        .web{
            color:rgba(119, 171, 230, 1);
        }
        .order-create-message{
            display: none;
            position:fixed;
            top:25%;
            left:50%;
            margin-left:-600px;
            width: 1200px;
            /* height: 400px; */
            z-index: 1001;
            overflow-y: auto;
            background-color: #fff;
            border: 1px solid #999;
        }
        .order-create-message table{
            width: 100%;
            border-collapse: collapse;
        }
        .order-create-message table thead{
            background-color:rgba(245, 245, 245, 1);
            height: 50px;
            border-top: 1px solid rgba(194, 194, 194, 1);
            border-bottom: 1px solid rgba(194, 194, 194, 1);
            border-radius: 4px;
        }
        .order-create-message table tbody tr td{
            height: 55px;
            line-height: 55px;
            min-width: 80px;
            text-align: center;
        }
        .order-create-message table tbody tr td img{
            width: 120px;
        }
        .order-create-message table tbody tr td input[type=text]{
            border: 1px solid rgba(128, 128, 128, 1);
            /* border-radius: 5px; */
            background-color: #fff;
            /* height: 25px; */
            line-height: 25px;
            width: 140px;
        }

        .order-create-message table tbody tr td select{
            border: 1px solid rgba(128, 128, 128, 1);
            background-color: #fff;
            height:29px;
            line-height: 29px;
            width: 140px;
            text-align: center;
        }
        .order-create-message table tfoot tr td a,
        .order-create-message table tbody tr td a{
            display: inline-block;
            border: 1px solid #eee;
            border-radius: 5px;
            background-color: #078cda;
            color: #fff;
            font-size: 18px;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            margin: 5px 15px;
        }
        .message-x,
        .order-create-message-x{
            float: right;
            background-color: #ddd;
            color: red;
            text-decoration: none;
            width: 35px;
            height: 35px;
            line-height: 35px;
            margin-right: 5px;
            text-align: center;
        }
        .message{
            z-index: 1001;
            position: fixed;
            top:20%;
            left:50%;
            margin-left: -300px;
            width: 600px;
            max-height: 375px;
            overflow: hidden;
            background-color: #fff;
            display: none;
            border:1px solid #eee;
            border-radius: 5px;
        }
        .message .message-title{
            width: 97%;
            margin: 0px auto;
            height: 35px;
        }
        .message .message-title span{
            font-size: 24px;
            line-height: 35px;
        }
        .message table{
            width: 100%;
            max-height: 300px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .message table tr th{
            text-align: center;
        }
        .message table tr td{
            text-indent: 5px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            color: #444;
            text-align: center;
            border-bottom: 1px solid #777;
        }
        .message table tr td img{
            height: 100px;
        }
        .message table tr td a{
            margin: 0px auto;
            display: block;
            width: 60px;
            height: 25px;
            line-height: 25px;
            color: #fff;
            background-color: #03aa35;
            text-align: center;
        }
        .message .message-button{
            width: 100%;
            text-align: center;
            height: 35px;
        }
        .message .message-button a{
            display: block;
            text-align: center;
            height: 25px;
            line-height: 25px;
            width: 120px;
            background-color: rgb(1, 224, 120);
            color: #fff;
            padding:5px;
            margin: 0px auto;
        }
        .message2{
            border: 2px solid #000;
            border-radius: 10px;
            z-index: 1002;
            position: fixed;
            top:25%;
            left:50%;
            margin-left: -252px;
            width: 500px;
            height: 150px;
            overflow: hidden;
            background-color: #fff;
            display: none;
        }
        .message2 table{
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
        .message2 table tbody tr td {
            text-align: center;
            line-height: 40px;
        }
        .message2 table tbody tr td a{
            background-color: #fd8686;
            color: #fff;
            display: inline-block;
            margin: 0px 10px;
            width: 80px;
            height: 30px;
            line-height: 30px;
        }
        .message2 table tbody tr td input{
            width: 90%;
            height: 35px;
            line-height: 35px;
            border:1px solid #666;
            border-radius: 5px;
        }
        .message2 table tfoot tr td{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .message2 table tfoot tr td a{
            margin: 0px 30px;
            display: inline-block;
            width: 120px;
            height: 25px;
            line-height: 25px;
            padding:5px;
            background-color: #078cda;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="address-data" class="message2">
        <table>
            <thead>
                <tr id="address-data-title">
                    <th>域名</th>
                    <th>名称</th>
                </tr>
            </thead>
            <tbody>
                <tr id="address-data-data">
                    <td><input type="text" id="data_web"></td>
                    <td><input type="text" id="data_name"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">
                        <a href="javascript:save_data();">确认</a>
                        <a href="javascript:none_data();">取消</a>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div id="with" class="message">
        <div class="message-title">
            <span>列表</span>
            <a href="javascript:hiddenmsg();" class="message-x">X</a>
        </div>
        <table>
            <thead id="message-thead">
                <tr>
                    <th>域名</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="message-tbody">

            </tobdy>
        </table>
        <div class="message-button">
            <a href="javascript:address_data();">添加</a>
        </div>
    </div>
    <div id="info" class="order-create-message">
        <table>
            <thead>
                <tr>
                    <th>公司名称</th>
                    <th>联系人</th>
                    <th>联系方式</th>
                    <!-- <th>项目套餐</th> -->
                    <!-- <th>到期时间</th> -->
                    <th>提示</th>
                    <th>项目状态</th>
                    <!-- <th>网络(异常)</th> -->
                    <!-- <th>付费金额</th> -->
                    <!-- <th>合同复印件</th> -->
                    <th>
                        <a class="order-create-message-x" href="javascript:info_none();">X</a>
                    </th>
                </tr>
            </thead>
            <tbody id="order-message">
                <tr>
                    <td><input type="text" id="name"></td>
                    <td><input type="text" id="realname"></td>
                    <td><input type="text" id="mobile"></td>
                    <!-- <td><input type="text" id="type"></td> -->
                    <!-- <td><input type="text" id="name"></td> -->
                    <td><input type="text" id="tip"></td>
                    <!-- <td><input type="text" id="name"></td> -->
                    <!-- <td><input type="text" id="name"></td> -->
                    <td>
                        <select id="status">
                            <option value="1">正常</option>
                            <option value="2">禁用</option>
                        </select>
                    </td>
                    <!-- <td id="image-td"><a href="javascript:file();">上传</a></td> -->
                    <td>
                        <input type="text" id="id" style="display: none;">
                        <input type="text" id="images" style="display: none;">
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="11">
                        <a href="javascript:save();">
                            确认
                        </a>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="main">
        <div class="search-data">
            <div class="search-div">
                <label for="nickname">客户名称:</label>
                <input type="text" id="realname" placeholder="客户名称">
            </div>    
            <div class="search-div">
                <label for="domain_name">域名:</label>
                <input type="text" id="web" placeholder="域名">
            </div>
            <div class="search-div">
                <label for="status">授权状态:</label>
                <input type="text" id="status" placeholder="授权状态">
            </div>
            <!-- <div class="search-div">
                <label for="open_time">投放时间:</label>
                <input type="text" id="open_time" placeholder="投放时间">
            </div> -->
            <!-- <div class="search-div">
                <label for="end_date">到期时间:</label>
                <input type="text" type="date" id="end_date" placeholder="到期时间">
            </div> -->
            <div class="search-div">
                <a href="javascript:;" onclick="search()">搜索</a>
                <a href="javascript:;" onclick="none()">重置</a>
            </div>
        </div>
        <div class="order-page">
            <table class="order-page-table">
                <thead>
                    <tr>
                        <th>公司名称</th>
                        <th>联系人</th>
                        <th>联系方式</th>
                        <!-- <th>项目套餐</th>
                        <th>到期时间</th> -->
                        <th>提示</th>
                        <!-- <th>项目状态</th>
                        <th>网络(异常)</th> -->
                        <!-- <th>付费金额</th> -->
                        <!-- <th>合同复印件</th> -->
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="order-list">
                    {volist name="list" id="value"}
                    <tr>
                        <td>{$value.name}</td>
                        <td>{$value.realname}</td>
                        <td>{$value.mobile}</td>
                        <td></td>
                        <td>
                            <a href="javascript:info({$value.id});">查看</a>
                            <a href="javascript:info({$value.id},'web');">域名</a>
                            <a href="javascript:info({$value.id},'keyword');">关键词</a>
                            <a href="javascript:info({$value.id},'images');">合同</a>
                        </td>
                    </tr> 
                    {/volist}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="11">
                            <div class="table-check">
                                <label for="ids" onclick="selectAll()">
                                    <input id="ids" type="checkbox" name="ids">
                                    已经选择<b id="ids-count">0</b>个
                                </label>
                            </div>
                            <div class="table-button">
                                <!-- <a href="javascript:;" onclick="">续费</a> -->
                                <a href="javascript:;" onclick="info_show()">添加客户</a>
                            </div>
                            <div class="page">
                                {$list|raw}
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- <div class="keywords-order-list-button" id="keywords-order-list-button" style="display:none;">
            <div class="total-price">
                <label for="total-price-1">总价:￥<b id="total-price"></b></label>
            </div>
        </div> -->
    </div>
    <input type="file" onchange="upload(this.files)" id="image" style="display: none;">
</body>
<script src="/static/js/base.js"></script>
<script>
    var is_check = 1,check_count = 0,amount = 0,data_type = 'info',select_id = 0;
    function info_none(){
        block_mask_hide();
        document.getElementById('info').style ='display:none';
    }

    function info_show(){
        block_mask_show();
        document.getElementById('info').style ='display:block';
    }

    function end_time(value){
        let end_date = getCurrentDate();
        end_date.year = parseFloat(end_date.year) + parseFloat(value);
        document.getElementById('end_date').innerText = end_date.year + '-' + end_date.month + '-' + end_date.day;
        document.getElementById('order_amount').innerText = amount * parseInt(value);
    }

    function file(){
        document.getElementById('image').click();
    }

    function with_show(id,type){
        block_mask_show();
        let w = document.getElementById('with');
        w.style = 'display:block';

    }

    function upload(files){
        let file = files[0]; // 获取用户选择的文件  
        // console.log(file);
        if (!file.type.match('image.*')) {  
            return alert('Please select an image file.');  
        }  
    
        var reader = new FileReader();  
    
        // 当读取操作完成时，执行的函数  
        reader.onload = function(e) {  
            // e.target.result包含了图片的Base64编码  
            var imgBase64 = e.target.result;  
            // 你可以在这里使用这个Base64字符串，比如直接显示图片  

            // 或者通过Ajax发送到服务器  
            // console.log(imgBase64);  
            // 例如，将Base64编码的图片设置为某个img元素的src  
            // document.getElementById('image-td').innerHTML = "<img onclick=\"file()\" src=\"" + imgBase64 + "\">";  
            $.ajax({
                url:'/image',
                type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                data:{image:imgBase64},
                dataType: 'json', // 预期服务器返回的数据类型  
                success: function(res) {
                    if (res.code == 200){
                        $.ajax({
                            url:'/index/customer/save?type=' + data_type + '&id=' + select_id,
                            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
                            data:{image:res.data},
                            dataType: 'json', // 预期服务器返回的数据类型  
                            success: function(result) {
                                if (result.code == 200){
                                    info(select_id,data_type);
                                }
                            }
                        });
                        // document.getElementById('images').value = res.data;
                    }
                }
            });
        };  
    
        // 以DataURL的形式读取文件  
        reader.readAsDataURL(file);  
    }

    function save(){
        let id = document.getElementById('id').value,
        name = document.getElementById('name').value,
        realname = document.getElementById('realname').value,
        mobile = document.getElementById('mobile').value,
        tip = document.getElementById('tip').value,
        status = document.getElementById('status').value,
        images = document.getElementById('images').value;
        $.ajax({
            url:'/index/customer/save?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{
                id:id,
                name:name,
                realname:realname,
                mobile:mobile,
                tip:tip,
                status:status,
                images:images
            },
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    return show_after('添加成功','友情提示',true);
                }
            }
        });
    }

    function address_data(){
        let a = document.getElementById('address-data');
        if (data_type == 'web'){
            a.style = 'display:block';
            document.getElementById('address-data-title').innerHTML = '<tr><th>域名</th><th>名称</th></tr>';
            document.getElementById('address-data-data').innerHTML = '<tr><td><input id="data_web"></td><td><input id="data_name"></td></tr>';
        }else if(data_type == 'keyword'){
            a.style = 'display:block';
            document.getElementById('address-data-title').innerHTML = '<tr><th>关键词</th><th>到期时间</th></tr>';
            document.getElementById('address-data-data').innerHTML = '<tr><td><input id="data_keyword"></td><td><input id="data_end_time" type="date"></td></tr>';
        }else{
            document.getElementById('image').click();
        }
    }

    function none_data(){
        let obj = {};
        let message = document.getElementById('address-data-data');
        let input = message.getElementsByTagName('input');
        for(let i=0;i<input.length;i++)input[i].value = '';
        document.getElementById('address-data').style = 'display:none';
    }

    function save_data(){
        let obj = {};
        let message = document.getElementById('address-data-data');
        let input = message.getElementsByTagName('input');
        console.log(input);
        for(let i=0;i<input.length;i++)
            obj[input[i].id] = input[i].value;
        $.ajax({
            url:'/index/customer/save?type=' + data_type + '&id=' + select_id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:obj,
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    hiddenmsg();
                    info(select_id,data_type);
                }
            }
        });
    }

    function data_del(type,id){
        $.ajax({
            url:'/index/customer/del?type=' + type + '&id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{select_id:select_id},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    hiddenmsg();
                    info(select_id,data_type);
                }
            }
        });
    }

    function info(id,type = 'info'){
        select_id = id;
        data_type = type;
        $.ajax({
            url:'/index/customer/info?id=' + id,
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            data:{},
            dataType: 'json', // 预期服务器返回的数据类型  
            success: function(res) {
                if (res.code == 200){
                    let string = '';
                    let thead = document.getElementById('message-thead');
                    let tbody = document.getElementById('message-tbody');
                    if (type == 'info'){
                        info_show();
                        document.getElementById('id').value = res.data.id;
                        document.getElementById('name').value = res.data.name;
                        document.getElementById('realname').value = res.data.realname;
                        document.getElementById('mobile').value = res.data.mobile;
                        document.getElementById('tip').value = res.data.tip;
                    }else if(type == 'web'){
                        with_show(id,type);
                        let web = res.data.web;
                        thead.innerHTML = '<tr><td>域名</td><td>名称</td><td>操作</td></tr>';
                        web.forEach(item => {
                            string += '<tr><td>' + item.name + '</td><td>' + item.web + '</td><td><a href="javascript:data_del(\'web\',' + item.id +');">删除</td></tr>';
                        });
                        tbody.innerHTML = string;
                    }else if(type == 'keyword'){
                        with_show(id,type);
                        let keywords = res.data.keywords;
                        thead.innerHTML = '<tr><td>关键词</td><td>到期时间</td><td>操作</td></tr>';
                        keywords.forEach(item => {
                            string += '<tr><td>' + item.keyword + '</td><td>' + item.end_time + '</td><td><a href="javascript:data_del(\'keyword\',' + item.id +');">删除</td></tr>';
                        });
                        tbody.innerHTML = string;
                    }else{
                        with_show(id,type);
                        let images = res.data.images;
                        images = JSON.parse(images);
                        thead.innerHTML = '<tr><td>合同</td><td>操作</td></tr>';
                        images.forEach(function(item,index){
                            string += '<tr><td><img src="' + item + '"></td><td><a href="javascript:data_del(\'images\',' + index +');">删除</td></tr>';
                        });
                        tbody.innerHTML = string;
                    }
                }
            }
        });
    }
</script>
</html>